<template>
  <div>
    <div id="box">
      <van-icon name="setting" size="20px" id="sett" @click="addres()"/>
      <van-icon name="envelop-o" size="20px" id="env" />
    </div>
    <div id="box1">
      <a href>
        <img src="https://img.yzcdn.cn/vant/apple-3.jpg" id="ims" />
      </a>
      <p>未来</p>
    </div>
    <div id="box2">
      <table width="70%" height="15%">
        <tr>
          <td>0</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>钱包</td>
          <td @click="tap()">奖励金</td>
          <td @click="tap()">优惠券</td>
        </tr>
      </table>
    </div>
    <div id="box22">
      <van-nav-bar
        left-text="我的订单"
        right-text="查看更多订单"
        color="#000"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <div id="box3">
      <table width="100%" height="20%">
        <tr>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
        </tr>
        <tr>
          <td>待支付</td>
          <td>待发货</td>
          <td>待收货</td>
          <td>售后</td>
        </tr>
      </table>
    </div>
    <div class="teshu" id="box4">
      <table width="100%" height="20%">
        <tr>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
        </tr>
        <tr>
          <td>我的鉴定</td>
          <td>我的回收</td>
          <td>我的养护</td>
        </tr>
      </table>
    </div>
    <div id="box4">
      <table width="100%" height="20%">
        <tr>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
          <td>
            <img src="https://img.yzcdn.cn/vant/apple-3.jpg" />
          </td>
        </tr>
        <tr>
          <td>我的找货</td>
          <td>我的店铺</td>
          <td>意见反馈</td>
        </tr>
      </table>
    </div>
    <div id="box6">
      <p>客服电话：400--086-5285</p>
    </div>
    <div id="box7">
      <ul>
        <li @click="tab01()">首页</li>
        <li @click="tab02()">分类</li>
        <li id="circl" @click="tab03()">发布</li>
        <li @click="tap1()">购物车</li>
        <li >我的</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "my",
  data() {
    return {};
    //         list:{'待支付','待发货',
    // '代收货','售后'        }
  },
  methods: {
    onClickLeft() {
      this.$toast("我的订单");
    },
    onClickRight() {
      this.$toast("查看更多订单");
    },
    tap() {
      this.$router.push({ path: "/coupon" });
    },
     tap1() {
      this.$router.push({ path: "/cart" });
    },
    tab01(){
      this.$router.push('/index');
    },
     tab02(){
      this.$router.push('/classes');
    },
     tab03(){
      this.$router.push('/pub');
    },
    addres(){
      this.$router.push('/setting');
    }
  }
};
</script>
<style scoped>
#box {
  width: 100%;
  height: 5%;
}
#sett {
  float: left;
  margin-left: 85%;
  margin-right: 10px;
  margin-top: 10px;
}
#env {
  float: left;
  margin-top: 10px;
}
#box1 {
  width: 30%;
  height: 30%;
  margin-left: 35%;
}
#ims {
  width: 85%;
  height: 85%;
  border: 2px solid #aaa;
  border-radius: 50%;
  overflow: hidden;
}
#box1 p {
  font-size: 12px;
  text-align: center;
  line-height: 15%;
}
#box2 table {
  margin-left: 15%;
  text-align: center;
  margin-top: 5%;
  margin-bottom: 3%;
}
#box22 {
  height: 1rem;
  border-top: 0.15rem solid #e6e6e6;
  padding-top: -0.75rem;
}
#box3 {
  padding: 0.1rem;
  border-top: 0.3rem solid #e6e6e6;
  border-bottom: 0.15rem solid #e6e6e6;
}
.teshu {
  border-bottom: 2px solid #e6e6e6;
}
#box3 table {
  padding-left: 1rem;
}
#box3 img,
#box4 img {
  width: 1rem;
  height: 1rem;
}
#box4 {
  padding: 0.3rem 1.8rem;
}
#box6 {
  width: 100%;
  height: 1.4rem;
  line-height: 0.9rem;
  text-align: center;
  background: #e6e6e6;
  position: fixed;
  bottom: 1.8rem;
}
#box7 {
  width: 100%;
  height: 1.8rem;
  position: fixed;
  bottom: 0;
}
#box7 ul {
  width: 96%;
  height: 1.2rem;
  margin: 0.3rem auto;
}
#box7 ul li {
  width: 15%;
  height: 1rem;
  float: left;
  border: 0.02rem solid #aaaaaa;
  text-align: center;
  line-height: 1rem;
  margin-left: 0.4rem;
  margin-top: 0.1rem;
  border-radius: 10%;
}
#box7 ul #circl {
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  border-radius: 50%;
  margin-top: -0.1rem;
}
</style>
